<template>
  <div class="home">
    get,post,put,delete等请求
  </div>
</template>

<script>
import axios from "axios";
/*
    axios请求方法:get,post,put,patch,
    delete

    get:获取数据
    post:提交数据(表单提交+文件上传)
    put:更新数据(所有数据都推送到后端)
    patch:更新数据(只将修改的数据推送到后端)
    delete:删除数据

    具体请求方式由后端定义
  */

export default {
  name: "demo2",
  components: {},
  created() {
    /*----------------------Get请求------------------------*/

    axios.get("/data.json").then(res => {
      console.log(res);
    });

    //http://localhost:8080/data.json?id=12

    // axios.get('/data.json',{
    //   params:{
    //     id:12
    //   }
    // }).then((res)=>{
    //   console.log(res)
    // })

    // axios({
    //   method:'get',
    //   url:'/data/json',
    //   params:{
    //     id:12
    //   }
    // }).then(res=>{
    //   console.log(res)
    // })

  //   /*----------------------POST请求------------------------*/

  //   //第一种是form-data,表单提交(比较老旧，用于图片上传和文件上传):
  //   let formData = new FormData();
  //   for (let key in data) {
  //     formData.append(key, data[key]);
  //   }
  //   axios.post("/post", formData).then(res => {
  //     console.log(res);
  //   });
  //   //第二种applicition/json,基于ajax:
  //   let data = {
  //     id: 12
  //   };

  //   axios.post("/post", data).then(res => {
  //     console.log(res);
  //   });

  //   axios({
  //     method: "post",
  //     url: "/post",
  //     data: data
  //   }).then(res => {
  //     console.log(res);
  //   });


  //   /*----------------------Put请求------------------------*/
  //   axios.put("/put", data).then(res => {
  //     console.log(res);
  //   });

  //   /*----------------------patch请求------------------------*/
  //   axios.patch("/patch", data).then(res => {
  //     console.log(res);
  //   });

  //   /*----------------------delete请求------------------------*/
  //   // 1.在params里拼接对象
  //   axios.delete("/delete", {
  //       params: {
  //         id: 12
  //       }
  //     }) .then(res => {
  //       console.log(res);
  //     });
  //  // 2.在请求体内发送数据
  //   axios.delete("/delete", {
  //       data: {
  //         id: 12
  //       }
  //     }).then(res => {
  //       console.log(res);
  //     });
  }
};
</script>
